<template>
  <el-row class="panorama_box">
    <el-col :span="12" :offset="6" class="content">
      <!-- 上方物品、房屋导航 -->
      <el-row class="router_link">
        <el-col :span="12">
          <router-link
            :to="{ name: 'good' }"
            class="tab_item"
            active-class="tab_active"
            >物品交易</router-link
          >
        </el-col>
        <el-col :span="12">
          <router-link
            :to="{ name: 'room' }"
            class="tab_item"
            active-class="tab_active"
            >房屋出租</router-link
          >
        </el-col>
      </el-row>
      <!-- 下方组件展示 -->
      <keep-alive>
        <router-view class="router_view" />
      </keep-alive>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "Panorama",
};
</script>

<style scoped>
li {
  height: 300px;
}

/* 滚动条相关配置 */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f5cece;
}
::-webkit-scrollbar-thumb {
  background: red;
}

.panorama_box {
  height: 100%;
}

.content {
  background-color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.router_link {
  height: 8%;
  display: flex;
  align-items: center;
  text-align: center;
  box-shadow: 0px 2px 5px 0px rgba(34, 91, 248, 0.3);
  border-radius: 4px;
}

.tab_item {
  text-decoration: none;
  color: grey;
}

.tab_active {
  color: #22a1ff;
}

.router_view {
  height: 92%;
}
</style>